<template>
	<div class="headimgList">
		<div>
			<div>虾米官方榜</div>
			<slot>
				<ul class="musiclist">
					<li @click="changType(item)" v-for="item in apiArr.length==9?apiArr:[]" >
						<div class="musicImg">
							<musicImg :src="item.pic_s444"></musicImg>
						</div>
						<p>{{item.name}}</p>
					</li>
				</ul>
			</slot>
		</div>
	</div>
</template>

<script>
	import jsonp from "jsonp";
	import musicImg from "./img.vue";
	import songerMusicl from "./songermusicl";
	export default {
		name:"headimgList",
		data(){
			return{
				apiArr:[],
			}
		},
		methods:{
			changType(item){
				this.$router.push("/songerM");
				console.log(item)
				this.$store.commit("changeCurType",item.billboard_type);
			},
			
		},
		computed:{
			
		},
		components:{
			musicImg,
		},
        created(){
        	//这个不要删了，保留着，有用
//          let nowTime = new Date().getTime();//获取当前时间,注意返回值为毫秒
//          if( 
//          	sessionStorage.apiArr
//          ){//判断之前是否已经存储了headimgList信息
//          	var tem =JSON.parse(sessionStorage.apiArr);
//              if(nowTime - tem.expir<3600000){//判断存储信息的时间和当前时间的距离是否小于1小时
//              	this.apiArr = tem;
//              	console.log(this.apiArr)
//                    return;//小于1h就直接return，不再执行ajaj请求
//              }
//          }
            //新歌榜
            jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=0&offset=0",null,(err,res)=>{
                if(err){
                    console.log(err)
                }else{
                    sessionStorage.apiArr = JSON.stringify({//把json对象格式转化为字符串
                        "data":res,
                        "expir":new Date().getTime()
                    });
                     this.apiArr.push(res.billboard);
                }
            })
            //热歌榜
            jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=2&size=0&offset=0",null,(err,res)=>{
                if(err){
                    console.log(err)
                }else{
                    sessionStorage.apiArr = JSON.stringify({//把json对象格式转化为字符串
                        "data":res,
                        "expir":new Date().getTime()
                    });
                     this.apiArr.push(res.billboard);
                }
            })
            //摇滚榜
                    jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=11&size=0&offset=0",null,(err,res)=>{
                if(err){
                    console.log(err)
                }else{
                    sessionStorage.apiArr = JSON.stringify({//把json对象格式转化为字符串
                        "data":res,
                        "expir":new Date().getTime()
                    });
                     this.apiArr.push(res.billboard);
                }
            })
            //KTV热歌榜
                    jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=6&size=0&offset=0",null,(err,res)=>{
                if(err){
                    console.log(err)
                }else{
                    sessionStorage.apiArr = JSON.stringify({//把json对象格式转化为字符串
                        "data":res,
                        "expir":new Date().getTime()
                    });
                     this.apiArr.push(res.billboard);
                }
            })
            //Hito中文榜
                    jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=18&size=0&offset=0",null,(err,res)=>{
                if(err){
                    console.log(err)
                }else{
                    sessionStorage.apiArr = JSON.stringify({//把json对象格式转化为字符串
                        "data":res,
                        "expir":new Date().getTime()
                    });
                     this.apiArr.push(res.billboard);
                }
            })
            //经典老歌榜
                    jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=22&size=0&offset=0",null,(err,res)=>{
                if(err){
                    console.log(err)
                }else{
                    sessionStorage.apiArr = JSON.stringify({//把json对象格式转化为字符串
                        "data":res,
                        "expir":new Date().getTime()
                    });
                     this.apiArr.push(res.billboard);
                }
            })
            //情歌对唱榜
                    jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=23&size=0&offset=0",null,(err,res)=>{
                if(err){
                    console.log(err)
                }else{
                    sessionStorage.apiArr = JSON.stringify({//把json对象格式转化为字符串
                        "data":res,
                        "expir":new Date().getTime()
                    });
                     this.apiArr.push(res.billboard);
                }
            })
            //影视金曲榜
                    jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=24&size=0&offset=0",null,(err,res)=>{
                if(err){
                    console.log(err)
                }else{
                    sessionStorage.apiArr = JSON.stringify({//把json对象格式转化为字符串
                        "data":res,
                        "expir":new Date().getTime()
                    });
                     this.apiArr.push(res.billboard);
                }
            })
            //网络歌曲榜
                    jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=25&size=0&offset=0",null,(err,res)=>{
                if(err){
                    console.log(err)
                }else{
                    sessionStorage.apiArr = JSON.stringify({//把json对象格式转化为字符串
                        "data":res,
                        "expir":new Date().getTime()
                    });
                     this.apiArr.push(res.billboard);
                }
            })
        }
	}
</script>

<style scoped lang="scss">
	.headimgList{
		overflow: hidden;
		width: 95%;
		margin: 0 auto;
		div{
			margin-top: 2%;
			div{
				color: #ddd;
			}
			.musiclist li{
				width: 31.2%;
				display: inline-block;
				margin-top: 3%;
				margin-right: 1%;
				p{
					font-size: 16px;
					color: white;
					margin-top: 2%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
	}
</style>